<template>
  <div style="width: 100%; height: 100%; background-color: #fff">
    <div>
      <el-alert type="primary">
        <template #title>
          <div class="carousel">
            <div class="carousel-inner">
              <div class="item">林深时见鹿，海蓝时见鲸，梦醒时见你。一切美好从你我相遇开始。遇见鹿鲸，开启美好项目之旅...</div>
              <div class="item">林深时见鹿，海蓝时见鲸，梦醒时见你。一切美好从你我相遇开始。遇见鹿鲸，开启美好项目之旅...</div>
            </div>
          </div>
        </template>
      </el-alert>
    </div>

    <div style="padding: 10px 10px 3px 10px">
      <el-card>
        <el-row>
          <el-col :span="4">
            <el-statistic title="总项目数" :value="562"> </el-statistic>
          </el-col>
          <el-col :span="4">
            <el-statistic title="实现接口数量" :value="outputValue" />
          </el-col>
          <el-col :span="4">
            <el-statistic :value="138">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  接入厂商
                  <el-icon style="margin-left: 4px" :size="12">
                    <Male />
                  </el-icon>
                </div>
              </template>
              <template #suffix>家</template>
            </el-statistic>
          </el-col>
          <el-col :span="4">
            <el-statistic :value="138">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  接入接口数量
                  <el-icon style="margin-left: 4px" :size="12">
                    <Male />
                  </el-icon>
                </div>
              </template>
              <template #suffix><span style="color: green; font-size: 12px">较上个月⬆</span></template>
            </el-statistic>
          </el-col>

          <el-col :span="4">
            <el-statistic title="业务模型数" :value="890" />
          </el-col>

          <el-col :span="4">
            <el-statistic title="物料" :value="562"> </el-statistic>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div style="padding: 10px 10px 3px 10px">
      <el-card>
        开发本步骤：<el-tag>数据库概要设计</el-tag>--<el-tag>评审</el-tag>--<el-tag>接口文档（自动生成）</el-tag>--<el-tag>调整文档</el-tag>--<el-tag>评审</el-tag>--<el-tag>自动生成服务</el-tag>--<el-tag
          >完成服务开发</el-tag
        >
      </el-card>
    </div>
    <div style="padding: 3px 10px; display: flex; justify-content: space-between">
      <el-card style="width: calc(50% - 4px)">
        <div id="myEcharts" style="height: 460px"></div>
      </el-card>
      <el-card style="width: calc(50% - 4px)">
        <div id="myEcharts1" style="height: 460px"></div>
      </el-card>
    </div>

    <div style="padding: 3px 10px">
      <el-card>
        <div style="width: 100%; height: 100%">服务器等等运维面板</div>
      </el-card>
    </div>

    <div style="padding: 3px 10px">
      <el-card>
        <div>
          {{ title }}
          是一款进行软件需求分析、设计、开发、测试、运行维护的一体化制作和管理工具
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useTransition } from '@vueuse/core';
import { Male } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import graph from './graph.json';

import { getWebCnName } from '@/api/free';
import { nanoid } from 'nanoid';
// import { useRouter } from 'vue-router'
defineOptions({
  name: 'WorkBench',
});
// const router = useRouter()
const source = ref(0);
const myEcharts = echarts;
const outputValue = useTransition(source.value, {
  duration: 1500,
});
source.value = 172000;

const initChart = () => {
  const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion');
  chart.setOption({
    title: {
      text: '2024年各月项目需求处理数量(个)',
      left: 'center',
    },
    xAxis: {
      type: 'category',
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    },
    tooltip: {
      trigger: 'axis',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
        type: 'line',
        smooth: true,
        // itemStyle: {
        //   normal: {
        //     label: {
        //       show: true,
        //       position: 'top',
        //       formatter: '{c}',
        //     },
        //   },
        // },
      },
    ],
  });
  window.onresize = function () {
    chart.resize();
  };
};
const title = ref('');
const initChart1 = () => {
  const chartDom = document.getElementById('myEcharts1');
  const myChart = echarts.init(chartDom);
  let option: echarts.EChartsCoreOption | undefined = undefined;

  // myChart.showLoading()

  // myChart.hideLoading()

  // graph.nodes.forEach(function (node) {
  //   node.label = {
  //     show: node.symbolSize > 30,
  //   }
  // })
  option = {
    title: {
      text: '物料应用依赖关系图',
      //subtext: 'Default layout',
      top: 'top',
      left: 'center',
    },
    tooltip: {},
    legend: [
      {
        top: 'bottom',
        left: 'right',
        width: 60,
        // selectedMode: 'single',
        data: graph.categories.map(function (a: { name: string }) {
          return a.name;
        }),
      },
    ],
    animationDuration: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
      {
        name: 'Les Miserables',
        type: 'graph',
        legendHoverLink: false,
        layout: 'none',
        data: graph.nodes,
        links: graph.links,
        categories: graph.categories,
        roam: true,
        label: {
          position: 'right',
          formatter: '{b}',
        },
        lineStyle: {
          color: 'source',
          curveness: 0.3,
        },
        emphasis: {
          focus: 'adjacency',
          lineStyle: {
            width: 10,
          },
        },
      },
    ],
  };
  myChart.setOption(option);
};
onMounted(async () => {
  //获取title
  const res = await getWebCnName();
  title.value = res.data as unknown as string;
  initChart();
  initChart1();
});

const domain = window.location.host.split(':')[0];
const port = 8082;
const onTest = () => {
  const ws = new WebSocket(`ws://${domain}:${port}/admin-api/shell/execute/websocket`);
  ws.onopen = () => {
    const shellExecuteParam = {
      executeId: nanoid(),
      hostMachineId: '主机ID',
      shellScriptId: '执行指令ID',
    };
    ws.send(JSON.stringify(shellExecuteParam));
  };
  ws.onmessage = (event) => {
    //返回执行结果
    console.log(event.data);
  };
  ws.onclose = () => {};
};
</script>
<style lang="scss" scoped>
// @keyframes scrollText {
//   from {
//     transform: translateX(10%);
//   }

//   to {
//     transform: translateX(-100%);
//   }
// }

// .scroll-text {
//   display: block;
//   white-space: nowrap;
//   overflow: hidden;
//   animation: scrollText 12s linear infinite;
// }

.carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  /* 根据需要调整 */
}

.carousel-inner {
  display: flex;
  width: 100%;
  /* 根据项目数量和宽度调整 */
  animation: scroll 10s linear infinite;
}

.item {
  flex: 0 0 auto;
  /* 不允许flex项伸缩 */
  width: 100%;
  /* 根据需要调整 */
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* 根据项目数量调整 */
  }
}
</style>
